<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的收藏-删除</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/app.css" />
    <style>
        .inputBox{display: none}
        .cancelBtn{display: none}
        .foter-btn{display: none}
        .mar80{margin-bottom: 80px;}
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a style="position:absolute;z-index: 2"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a href="{:U('indexSet')}" style='position:absolute; z-index:3; width:40px; height:40px; left:0px; top:0px;background: blue;opacity:0'></a>
    <h1 class="mui-title">我的收藏</h1>
    <a class="mui-icon mui-icon-trash mui-pull-right deleteBtn"></a>
    <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right cl6 cancelBtn">取消</button>
</header>
<div class="mui-content">
    <ul class="mui-table-view" id="heeda">
        <include file="Public/collection_public" />
    </ul>
    <div class="foter-btn">
        <button type="button" class="quanxuan mui-btn-sz allChose">全选</button>
        <button type="button" class="shanchu mui-btn-sz">删除</button>
    </div>
</div>
<script src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/layer_mobile/layer.js"></script>
</body>
<script>
    $(function () {
        $(".deleteBtn").click(function () {
            $(this).hide();    //删除图片隐藏
            $(".cancelBtn").show();   //取消字体显示
            $(".inputBox").show();    //左边复选框显示
            $(".foter-btn").show();   //底部安钮显示
            $(".mui-table-view").addClass("mar80")
        });
        $(".cancelBtn").click(function () {
            $(".deleteBtn").show();    //删除图片显示
            $(this).hide();   //取消字体隐藏
            $(".inputBox").hide();    //左边复选框隐藏
            $(".foter-btn").hide();   //底部安钮隐藏
            $(".mui-table-view").removeClass("mar80")
        });
        var switched = true;   //变量控制全选或者取消
        var idArr = [];  //存储每一项id的数组
        var idJson = {'a':idArr};  //传到后天的id数据json
        $(".allChose").click(function(){
            if(switched){
                idJson.a = [];  //每次把数组置空
                $(".inputBox input").prop('checked',true);    //所有复选框选中
                switched = false;
                var num = $(".mui-table-view").children().length;    //列表的个数
                for(var i=0; i<num; i++){
                    idJson.a.push($(".mui-table-view").children().eq(i).attr("id"));    //把列表id放到数组里面
                };
            }else{
                $(".inputBox input").prop('checked',false);    //所有复选框取消
                idJson.a = [];    //列表的id清空
                switched = true;
            }
        });
        $(".inputBox input").click(function () {   //点击每一项选择框
            var isChose = $(this).is(':checked');
            if(!isChose){     //当复选框没有选中的时候
                var nowId = $(this).parent().parent().parent().attr("id");       //获取当前列表的id
                var oIndex = idJson.a.indexOf(nowId);   //当前id值在数组中的索引
                idJson.a.splice(oIndex,1);   //当前最新的id数组
            }else{           //当复选框选中的时候
                var nowIdx = $(this).parent().parent().parent().attr("id");    //获取当前列表的id
                idJson.a.push(nowIdx);
            }
        });
        $('.shanchu').click(function () {
            $.post("{:U('deleteCollection')}",{id:idJson},function (rel) {
               if(rel == 200)
               {
                   location = location
               }
               else if(rel == 400)
               {
                   layer.open({
                       content: '请选择需要删除的收藏库'
                       ,btn: '我知道了'
                   });
                   return false
               }
               else
               {
                   layer.open({
                       content: '删除失败'
                       ,btn: '我知道了'
                   });
                   return false
               }
            })
        })
    })
</script>
<script>
    var page = 1, //分页码
        off_on = false, //分页开关(滚动加载方法 1 中用的)
        timers = null; //定时器(滚动加载方法 2 中用的)
    //还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
    $(window).scroll(function() {
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(window).height() + $(window).scrollTop() + 120) >= $(document).height()) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                page++;
                //alert(page)
                $.post("{:U('collection_list')}",{page:page},function(rels)
                {
                   if(rels.code  == 200)
                    {
                        $('#heeda').append(rels.html)
                    }
                })
            }, 300);
        }
    });
</script>
</html>
